<script setup>
    import {ref} from 'vue'

    const categories = ref([
        {
            "gcId": 1,
            "gcName": "女装",
        },
        {
            "gcId": 2,
            "gcName": "食品",
        },
        {
            "gcId": 3,
            "gcName": "玩具",
        },
        {
            "gcId": 4,
            "gcName": "家电",
        }, {
            "gcId": 5,
            "gcName": "家居",
        },

    ])
    //声明一个异步的函数
    import {categoryAddService, categoryListService, categoryUpdateService} from "@/api/good";

    const categoryList = async () => {
        let result = await categoryListService();
        console.log('商品分类列表：');
        console.log(result.data);
        if (result.data != null) {
            categories.value = result.data.map(item => ({
                gcId: item.gcId,
                gcName: item.gcName,
            }))
        } else {
            ElMessage.error("出现问题")
        }
    }
    categoryList();

    const categoryModel = ref({
        gcName: ''
    })
    const visibleDrawer = ref(false)

    // 添加表单
    const addCategory = async () => {
        console.log('添加商品分类log')
        console.log(categoryModel.value.gcName)
        let result = await categoryAddService(categoryModel.value)
        ElMessage.success(result.msg ? result.msg : "添加成功")
        //让抽屉消失
        categoryList();
        visibleDrawer.value = false;
        clearData();
    }
    //编辑表单
    const visibleDialog = ref(false)
    const showDialog = (row) => {
        visibleDialog.value = true;
        categoryModel.value.gcId = row.gcId;
        categoryModel.value.gcName = row.gcName;
    }
    //修改分类
    const updateCategory = async () => {

        console.log('修改商品')
        console.log(categoryModel.value.gcName)
        let result = await categoryUpdateService(categoryModel.value)
        ElMessage.success(result.msg ? result.msg : "修改成功")
        categoryList();
        //隐藏弹窗
        visibleDialog.value = false;
    }
    import {ElMessage} from 'element-plus'
    import {Edit} from "@element-plus/icons-vue";
    //清空模型
    const clearData = () => {
        categoryModel.value.gcName = '';
    }


    //取消添加
    const cancelsubmit = () => {
        categoryModel.value.gcName = '';
        visibleDrawer.value = false;
        visibleDialog.value = false;
    }
    //表单校验规则
    const rules = {
        gcName: [{
            required: true, message: "请输入商品分类名称", trigger: 'blur'
        }]
    }

</script>
<template>
    <el-card class="cat-container">
        <div class="header">
            <span>商品管理 > 商品分类</span>
            <el-button type="primary" class="add-btn" @click="visibleDrawer=true;clearData()">
                <el-icon>
                    <Plus/>
                </el-icon>
                添加分类
            </el-button>
        </div>
        <el-card class="table-all">
            <el-row>
                <el-table :data="categories" class="userList-table"
                          :header-cell-style="{ textAlign: 'center' ,height: '70px', background: 'ghostwhite'} "
                          :cell-style="{ textAlign: 'center' }">
                    <el-table-column label="序号" prop="gcId"></el-table-column>
                    <el-table-column label="分类名称" prop="gcName"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button :icon="Edit" circle plain type="primary"
                                       @click="showDialog(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <template #empty>
                <el-empty description="没有数据"/>
            </template>
        </el-card>
        <!--        <div>-->
        <!--            <el-pagination-->
        <!--                    v-model:current-page="currentPage4"-->
        <!--                    v-model:page-size="pageSize4"-->
        <!--                    :page-sizes="[1, 3, 5, 10]"-->
        <!--                    :disabled="disabled"-->
        <!--                    :background="background"-->
        <!--                    layout="total, sizes, prev, pager, next, jumper"-->
        <!--                    :total="5"-->
        <!--            />-->
        <!--        </div>-->
        <!--        添加分类弹窗-->
        <el-drawer v-model="visibleDrawer" direction="rtl" size="50%"
                   style="height: 370px; margin-top: 60px; font-size: 5px">
            <template #header="添加分类">
                <h4 style="font-size: 20px;">添加分类</h4>
            </template>
            <el-form :model="categoryModel" label-width="150px" class="chouti" :rules="rules">
                <el-form-item label="分类名称">
                    <el-input v-model="categoryModel.gcName" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addCategory()">确定</el-button>
                    <el-button type="info" @click="cancelsubmit">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        <!--        编辑框-->
        <el-drawer v-model="visibleDialog" direction="rtl" size="50%" style="height: 450px;margin-top: 60px">
            <template #header="编辑分类">
                <h4 style="font-size: 20px;">编辑分类</h4>
            </template>
            <!-- 编辑商品分类表单 -->
            <el-form :model="categoryModel" label-width="150px" class="chouti">
                <el-form-item label="分类编号">
                    <el-input v-model="categoryModel.gcId" readonly></el-input>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input v-model="categoryModel.gcName" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateCategory()">确定</el-button>
                    <el-button type="info" @click="cancelsubmit">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </el-card>
</template>

<script>
    import {Plus, Edit} from "@element-plus/icons-vue";

    export default {
        name: "GoodsCategory",
        components: {Plus, Edit},
    }
</script>


<style scoped>
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        background-color: #ffffff;
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -15px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .add-btn {
        height: 20px;
        font-size: 10px;
        background-color: rgba(255, 230, 246, 0.68);
        color: #f13b82;
        border-color: #f13b82;
    }

    .cat-container {
        min-height: 100vh;
        background-color: rgba(135, 206, 250, 0.2);
        width: 100%;
        height: 100%;
        font-size: 10px;
    }

    .table-all {
        background-color: rgba(180, 241, 255, 0.68);
        margin-left: 2%;
        margin-right: 2%;
        margin-top: 5px;
        box-shadow: 5px 5px 5px 0 lightsteelblue;
        border-radius: 10px;
        height: 75vh;
        overflow-y: scroll;
    }

    .el-pagination {
        margin-top: 10px;
        font-size: 10px;
        height: 20px !important;
        justify-content: flex-end;
    }

    .userList-table {
        width: 99%;
        font-size: 10px;
    }

    .chouti .el-input {
        height: 30px;
        font-size: 10px;
        width: 200px;
    }
</style>
